import { defineStore } from "pinia";
import { ref, computed } from "vue";
import type { Keywords } from "@/types/sunnyKeywords/type";
import { listKeywordsApi } from "@/api/sunnykeywords";
//defineStore中的第一个参数，只要是唯一的名字就可以了，在vue devtools里面会显示这个名字，不需要一定是store同名，但正常肯定是这么写语义化
export const useKeywordsStore = defineStore("keywords", () => {
  const originKeywordsList = ref<Keywords[]>([]);

  //需要一个基于原始的关键字列表信息得到的只包含 name和keywords的列表
  const keywordsInfoList = computed(() => {
    return originKeywordsList.value.map((key) => {
      return { name: key.name, keywords: key.keywords,type:key.type };
    });
  });

  function listKeywords() {
    listKeywordsApi().then(({ data }) => {
      originKeywordsList.value = data;
      originKeywordsList.value.forEach((keywords) => {
        keywords.description = keywords.description.replaceAll("\\n", "<br/>");
      });
      console.log(originKeywordsList);
    });
  }

  return { keywordsInfoList, originKeywordsList, listKeywords };
});

// export { useKeywordsStore };
